<!-- 商品列表 -->
<template>
    <el-scrollbar height="80vh">
        <center>
            <el-input v-model="input" placeholder="请输入搜索内容" class="input-with-select">
                <template #prepend>
                    <el-button icon="Search" @click="searchAction" />
                </template>
                <template #append>
                    <el-select v-model="select" placeholder={{select}} style="width: 115px">
                        <el-option label="手机品牌搜索" value=1 />
                        <el-option label="手机型号搜索" value=2 />
                        <el-option label="选择搜索类型" value=0 />
                    </el-select>
                </template>
            </el-input>
            <div class="cel">
                <el-col class="home-item" v-for="(product, index) in dataList" :key="o" :span="8">
                    <template
                        v-if="type == 0 || type == 1 && product.name.includes(value) || type == 2 && product.description.includes(value)">
                        <el-card :body-style="{ padding: '20px' }">
                            <img :src="product.url" class="image" />
                            <div style="padding: 10px">
                                <el-row :gutter="20">

                                    <el-col :span="16"><el-text class="title" line-clamp="1" truncated> <router-link
                                                :to="{ name: 'detail', params: { productInfo: JSON.stringify(product) } }">{{
                                                    product.name
                                                }}</router-link></el-text></el-col>

                                    <el-col :span="8" class="price"><el-text class="w-100px mb-1" type="danger" size="small"
                                            truncated>
                                            {{ product.price }}
                                        </el-text></el-col>

                                </el-row>
                                <el-row :gutter="20">
                                    <el-col :span="18"><el-text class="desc" line-clamp="3" truncated>
                                            {{ product.description }}
                                        </el-text></el-col>
                                    <el-col :span="6"><el-button text class="button"
                                            @click="onAddItem(product)">加入购物车</el-button></el-col>

                                </el-row>



                            </div>
                        </el-card>
                    </template>
                </el-col>
            </div>
        </center>
    </el-scrollbar>
</template>

<script>
import { ref } from 'vue'
import { ElNotification } from 'element-plus'
const dataList = ref([
    {
        name: "HUAWEI Mate 60 RS 非凡大师 16GB+1TB 玄黑 ULTIMATE DESIGN",
        description: "双卫星通信，玄武钢化昆仑玻璃，传奇星钻设计",
        price: "12999.00",
        originalPrice: "12999.00",
        url: "https://res.vmallres.com/pimages//uomcdn/CN/pms/202309/gbom/6942103109621/428_428_9F0B82BD57F2C5853D61868D5486347Bmp.png",

    },
    {
        name: "遥遥领先是手机",
        description: "【新品上市】华为智慧屏 V5 Pro 85英寸 灵犀指向遥控 Super MiniLED 鸿鹄画质 4K超高清护眼电视 85英寸巨幕影院",
        price: "抢购价 ¥22999.00",
        originalPrice: "22999.00",
        url: "https://res.vmallres.com/pimages//uomcdn/CN/pms/202310/displayProduct/10086750782673/428_428_b_web757F427812D144D9E60D6C73322F0A56.png",

    },
    {
        name: "遥遥领先是手机",
        description: "【新品上市】华为智慧屏 V5 Pro 85英寸 灵犀指向遥控 Super MiniLED 鸿鹄画质 4K超高清护眼电视 85英寸巨幕影院",
        price: "抢购价 ¥22999.00",
        originalPrice: "22999.00",
        url: "https://res.vmallres.com/pimages//uomcdn/CN/pms/202310/displayProduct/10086750782673/428_428_b_web757F427812D144D9E60D6C73322F0A56.png",

    },
    {
        name: "遥遥领先是手机",
        description: "【新品上市】华为智慧屏 V5 Pro 85英寸 灵犀指向遥控 Super MiniLED 鸿鹄画质 4K超高清护眼电视 85英寸巨幕影院",
        price: "抢购价 ¥22999.00",
        originalPrice: "22999.00",
        url: "https://res.vmallres.com/pimages//uomcdn/CN/pms/202310/displayProduct/10086750782673/428_428_b_web757F427812D144D9E60D6C73322F0A56.png",

    },
    {
        name: "遥遥领先是手机",
        description: "【新品上市】华为智慧屏 V5 Pro 85英寸 灵犀指向遥控 Super MiniLED 鸿鹄画质 4K超高清护眼电视 85英寸巨幕影院",
        price: "抢购价 ¥22999.00",
        originalPrice: "22999.00",
        url: "https://res.vmallres.com/pimages//uomcdn/CN/pms/202310/displayProduct/10086750782673/428_428_b_web757F427812D144D9E60D6C73322F0A56.png",

    },
    {
        name: "遥遥领先是手机",
        description: "【新品上市】华为智慧屏 V5 Pro 85英寸 灵犀指向遥控 Super MiniLED 鸿鹄画质 4K超高清护眼电视 85英寸巨幕影院",
        price: "抢购价 ¥22999.00",
        originalPrice: "22999.00",
        url: "https://res.vmallres.com/pimages//uomcdn/CN/pms/202310/displayProduct/10086750782673/428_428_b_web757F427812D144D9E60D6C73322F0A56.png",

    },
    {
        name: "遥遥领先是手机",
        description: "【新品上市】华为智慧屏 V5 Pro 85英寸 灵犀指向遥控 Super MiniLED 鸿鹄画质 4K超高清护眼电视 85英寸巨幕影院",
        price: "抢购价 ¥22999.00",
        originalPrice: "22999.00",
        url: "https://res.vmallres.com/pimages//uomcdn/CN/pms/202310/displayProduct/10086750782673/428_428_b_web757F427812D144D9E60D6C73322F0A56.png",

    },
    {
        name: "HUAWEI P60 256GB 洛可可白 鸿蒙手机 含66W快充套装",
        url: "https://res.vmallres.com/pimages//uomcdn/CN/pms/202310/displayProduct/10086750782673/428_428_b_web757F427812D144D9E60D6C73322F0A56.png",
        description: "洛可可白 每一支都独一无二，超聚光XMAGE影像，双向北斗卫星消息，消息有来回，1-120Hz自适应刷新屏幕",
        price: "4888.00",
        originalPrice: "4988.00",
    },
    {
        name: "遥遥领先是手机",
        description: "【新品上市】HUAWEI MateBook X Pro 2023 微绒典藏版 13代酷睿i7 32GB 2TB 14.2英寸3.1K原色全面屏 墨蓝",
        price: "4888.00",
        originalPrice: "4988.00",
        url: "https://res.vmallres.com/pimages//uomcdn/CN/pms/202310/displayProduct/10086750782673/428_428_b_web757F427812D144D9E60D6C73322F0A56.png",

    },
])




export default {
    data() {
        return {
            dataList: dataList,
            type: 0,
            value: "",
            select: {
                label: "选择搜索类型",
                value: 0
            },
            input: ""
        }
    },

    methods: {

        onAddItem(product) {
            let that = this
            that.$router.push({ name: "succcess", params: { info: JSON.stringify(product) } })
            ElNotification({
                title: '添加购物车成功',
                message: '添加' + name + '到购物车成功',
                type: 'success',
            })
        },
        searchAction() {
            debugger
            console.log("qwerth", this.input, "qwert", this.select);
            if (this.select.value>=0) {
                this.type = this.select.value;
            } else {
                this.type = this.select;
            }
            this.value = this.input;
            console.log("value", this.value, "type", this.type);
            this.o += 1;
        },
    },



}
</script>
<style>
.desc {

    width: 100%;
    font-size: 10px;
    line-height: 20px;
    color: #999;
}

.title {
    font-size: 15px;
}

.price {
    margin: 0 0 0 0;
}

.bottom {
    margin-top: 13px;
    height: 20%;
    line-height: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.button {
    padding: 0;
    min-height: auto;
}

.image {
    width: 100%;
    display: block;
}

.cel {
    width: 90%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
}

.home-item {
    padding: 50px;
}

.input-with-select {
    width: 50%;
    margin-top: 20px
}
</style>